<%-- 
    Document   : show
    Created on : 13.09.2010, 15:48:04
    Author     : nico
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" uri="http://nixis.de/jsp/tags/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>${it.article.title}</title>
        <script type="text/javascript" src="<u:url value="/scripts/lib/jquery.rating.js" />"></script>
        <style type="text/css">
            @import url('<u:url value="/style/lib/rating/jquery.rating.css"/>');
            @import url('<u:url value="/style/article.css"/>');
        </style>
    </head>
    <body>
        <div style="position: relative">
            <div class="heading main-heading">
                <h1><a href="<u:url value="/article/${it.article.id}-${it.article.slug}"/>">${it.article.title}</a></h1>

                <c:if test="${it.userInfo != null}">
                    <div class="link-box">
                        <c:choose>
                            <c:when test="${it.userInfo.bookmark == null}">
                                <a title="Add article as bookmark" class="ajax open-lazy add-bookmark-link" href="<u:url value="/article/${it.article.id}/bookmark"/>">
                                    <span class="icon icon-heart add"></span>
                                </a>
                            </c:when>
                            <c:otherwise>
                                <a title="Show article bookmark" href="<u:url value="/bookmark#bookmark-${it.userInfo.bookmark.id}"/>">
                                    <span class="icon icon-heart"></span>
                                </a>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${it.userInfo.todo == null}">
                                <a title="Add article as todo" class="ajax add-todo-link" rel="add-todo-dialog" href="<u:url value="/article/${it.article.id}/todo"/>">
                                    <span class="icon icon-report add"></span>
                                </a>
                            </c:when>
                            <c:otherwise>
                                <a title="Show article in todos" href="<u:url value="/todo#todo-${it.userInfo.todo.id}"/>">
                                    <span class="icon icon-report"></span>
                                </a>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </c:if>
            </div>
            <div class="rating-box">
                <c:set var="articleRating" value="${it.userInfo.rating != null ? it.userInfo.rating.value : it.article.rating}" />
                <c:forEach begin="0" end="4" var="i">
                    <input name="rating" value="${i}" title="rate as ${i + 1}" type="radio"
                           class="rate-article" ${articleRating == i ? 'checked="checked"' : ''} />
                </c:forEach>
                <div class="note-tiny">Avg rating ${it.article.rating == -1 ? 'unrated' : it.article.rating}</div>
            </div>

            <script type="text/javascript">
                $(function() {
                    <c:choose>
                        <c:when test="${currentUser != null}">
                            $(".rate-article").rating({
                                required: true,
                                callback: function(val, item) {
                                    $.post("<u:url value="/article/${it.article.id}/rate"/>", {rating: val}, function(data, status) {
                                        $(".rating-box").tip("show");
                                        
                                        setTimeout(function() {
                                            $(".rating-box").tip("hide");
                                        }, 4000);
                                    }, "json");
                                }
                            });

                            $(".rating-box")
                                .tip({
                                    trigger: 'manual',
                                    gravity: "e",
                                    fade: true,
                                    title: function() { return "rating saved"; }
                                });
                        </c:when>
                        <c:otherwise>
                            $(".rate-article").rating({
                                readOnly: true
                            });
                        </c:otherwise>
                    </c:choose>
                    
                    var ajaxPost = function(event) {
                        event.preventDefault();

                        var link = this;

                        $.post($(this).attr("href"), {}, function(data, status) {
                            $(link)
                            .find("span")
                            .removeClass("add")
                            .unbind("click", ajaxPost)
                            .attr("href", data.url);
                        }, "json");
                    };

                    $(".ajax-post-link").click(ajaxPost);
                });
            </script>
            <div class="article-content">
                ${it.html}
            </div>
        </div>
        
        <c:if test="${it.dependencies != null && !empty it.dependencies}">
        <p class="dependencies">
            <strong>Depends on</strong> <c:forEach var="dependency" items="${it.dependencies}">
                &raquo; <a href="<u:url value="/article/${dependency.sluggedId}" />">${dependency.title}</a> 
            </c:forEach>
        </p>
        </c:if>

        <p class="notes">
            <c:if test="${not empty it.topics}">
                Filed under <c:forEach var="topic" items="${it.topics}">
                    <a href="<u:url value="/topic/${topic.id}-${topic.slug}"/>">${topic.name}</a>&nbsp;
                </c:forEach>
            </c:if>
            <br/>
            <a href="#" id="create-comment">Create a comment</a> or
            <a class="ajax"
                       href="<u:url value="/article/${it.article.id}/addDependencies" />"
                       title="Add dependency" rel="add-dependency-dialog">file a dependency</a> for this task

           <c:if test="${currentUser.admin}">
               or <a href="<u:url value="/article/${it.article.id}/edit" />">edit article</a>
           </c:if>.
        </p>

        <div id="create-comment-box" style="display: none;">
            <form action="<u:url value="/article/${it.article.id}/comment"/>" method="post">
                <fieldset>
                    <label for="comment-author-field">Your name</label>
                    <input id="comment-author-field"type="text" name="author" value="${currentUser != null ? currentUser.name : ''}" ${currentUser != null ? 'readonly="readonly"' : ''} />
                    <c:if test="${currentUser != null}">
                        <input type="hidden" name="userId" value="${currentUser.id}" />
                    </c:if>
                </fieldset>
                <fieldset>
                    <textarea cols="50" rows="5" name="comment">Your comment</textarea>
                </fieldset>
                <fieldset>
                    Want to add some dependency information to this task? Click
                    <a class="ajax"
                       href="<u:url value="/article/${it.article.id}/addDependencies" />"
                       title="Add dependency" rel="add-dependency-dialog">here</a>.
                </fieldset>
                <fieldset>
                    <input type="submit" value="send comment" />
                </fieldset>
            </form>
        </div>

        <script type="text/javascript">
            $("#create-comment").click(function(event) {
                event.preventDefault();
                $("#create-comment-box").show(1);
            });
        </script>

        <c:forEach var="comment" items="${it.comments}">
            <div class="comment">
                <span class="author">${comment.author}</span>
                <p>${comment.content}</p>
            </div>
        </c:forEach>
    </body>
</html>
